<template>
	<view class="all">
		<!-- 个人信息start -->
		<view class="Info">
			<view v-if="!shop.shopName" class="top"
				style="font-size: 30rpx; font-weight: bold; margin-left: 30rpx; color: white;" @click="navCreateShop">
				请创建企业
			</view>
			<view class="top" style="position: relative;" v-else>
				<view class="left">
					<image :src="baseHttp+shop.shopImg"
						style="margin-left: 10rpx; line-height: 110rpx; height: 100rpx;width: 100rpx;border-radius:20rpx;">
					</image>
					<view class="info">
						<text class="title">{{shop.shopName}}</text>
						<view class="" style="display: flex; margin-top: 10rpx;">
							当前余额： <text>{{shop.integral == undefined? '':shop.integral}}</text>点
						</view>
					</view>
				</view>
				<view class="right" style="position: absolute; right: 25rpx; top: 20rpx; width: 150rpx; height: 45rpx;"
					@click="ziliao">
				</view>
			</view>
		</view>

		<!-- 个人信息end -->
		<view class="footer">
			<view class="item" @click="navIPXingxiang(1)">
				<image src="../../static/images/a.png" mode=""></image>
				<!-- <view class="image">
					<image src="../../static/icon/进入店铺.png"></image>
				</view>
				<view class="text" @click="navIPXingxiang(1)">
					<view class="title">账号打标签</view>
				</view>
				<view>
					<image src="../../static/icon/right.png" mode="" style="height: 30rpx; width: 30rpx;"></image>
				</view> -->
			</view>
			<view class="item" @click="navDarenkoubo(2)">
				<image src="../../static/images/b.png" mode=""></image>
				<!-- <view class="image">
					<image src="../../static/icon/摄影机.png"></image>
				</view>
				<view class="text">
					<view class="title">人设破流量</view>					
				</view> -->
			</view>
			<view class="item" @click="navWanghongmendian(5)">
				<image src="../../static/images/c.png" mode=""></image>
				<!-- <view class="image">
					<image src="../../static/icon/定位.png"></image>
				</view>
				<view class="text">
					<view class="title">企业硬广告</view>
				</view> -->
			</view>
			<view class="item" @click="qiyebaokuan(6)">
				<image src="../../static/images/d.png" mode=""></image>
				<!-- <view class="image">
					<image src="../../static/icon/VIP (1).png"></image>
				</view>
				<view class="text">
					<view class="title">企业做促销</view>
				</view> -->
			</view>
			<view class="item" @click="navYijianchengpian(7)">
				<image src="../../static/images/e.png" mode=""></image>
				<!-- <view class="image">
					<image src="../../static/icon/进入店铺.png"></image>
				</view>
				<view class="text">
					<view class="title">数字人视频</view>
				</view> -->
			</view>
			<view class="item" @click="demoFactory(8)">
				<image src="../../static/images/f.png" mode=""></image>
				<!-- <view class="image">
					<image src="../../static/icon/引流.png"></image>
				</view>
				<view class="text">
					<view class="title">模板做爆款</view>
				</view> -->
			</view>
		</view>

		<!-- 素材库 -->
		<view class="sucai" @click="gotoSucai">

		</view>

		<!-- 成片中心start -->
		<view class="Pcenter" style="position: relative;" @click="navJianjiku">
			<view class="" style="position: absolute; top: 105rpx; left: 70rpx;">
				当前已累计打造 <text>{{videoNum}}</text> 条爆款视频
			</view>
		</view>
		<!-- 成片中心end -->

		<!-- 其他功能start -->
		<view class="qita">
			<view class="title" style="font-size: 36rpx; font-weight: bold; margin-top: 18rpx;">
				其他功能
			</view>
			<view class="List">
				<view class="item" @click="gotoAuth">
					<image src="../../static/images/dianpu.png"></image>
					<view style="font-size: 20rpx;">子账号授权</view>
				</view>

				<view class="item" @click="openChonzhi">
					<image src="../../static/images/jifen.png"></image>
					<view style="font-size: 20rpx;">积分充值</view>
				</view>
			</view>
		</view>
		<!-- 其他功能end -->

		<!-- <view style="width: 100%;height: 100rpx;background:red;color: #fff;" @click="navSecondType">素材库</view> -->

		<!-- 弹窗start -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="rgb(238, 234, 249)" class="popup-content">
				<view style="height: 800rpx;border-top-left-radius: 20rpx; overflow: auto;">
					<view class="popup-header">
						<view class="title">
							我的商家（{{person.length}}家）
						</view>
						<view class="close" @click="closepopup()">
							x
						</view>
					</view>
					<view class="shangjia" v-for="(item,index) in person" :key="index">
						<view class="left">
							<image :src="baseHttp+item.shopImg" style="height: 70rpx;width:70rpx;"></image>
							<view class="left-right">
								<view style="display: flex;">
									<view class="qiye">{{item.shopName}}</view>
									<view class="shouquan">
										{{item.type == 1 ? '自建':'授权'}}
									</view>
								</view>
								<view class="create-time">
									创建于{{item.createTime}}
								</view>
								<view class="classify">
									剪辑+直播
								</view>
							</view>
						</view>

						<view class="right" @click="bk(item)">
							打造爆款
						</view>
					</view>

					<view style="display: flex; justify-content: center;font-size: 30rpx;color: #666;">
						没有更多数据了
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 弹窗end -->
		<!-- 子账号态框 start -->
		<!-- <uni-popup ref="zizhanghaoPopup" background-color="rgba(0,0,0,0)" type="bottom">
			<view class="radius">
				<view class="header">
					<view>子账号绑定</view>
				
					<image src="../../static/icon/叉.png" @click="closeZizhanghao" style="width: 40rpx;height: 40rpx;">
					</image>
				</view>
				<view class="huati-box">
					<input class="huati-input" v-model="authoCode" placeholder="请输入授权码" />
					<image v-if="authoCode" src="../../static/icon/叉.png" @click="clearCami"
						style="width: 34rpx;height: 34rpx;margin: 0 10rpx;"></image>
				</view>

				<view class="huati-footer">
					<view class="cancel" @click="closeZizhanghao">
						取消
					</view>
					<view class="submit" @click="submitAuthCode">
						提交
					</view>
				</view>

			</view>
		</uni-popup> -->
		<!-- 充值模态框 start -->
		<uni-popup ref="chongzhiPopup" background-color="rgba(0,0,0,0)" type="bottom">
			<view class="radius">
				<view class="header">
					<view>积分充值</view>
					<!-- <view class="radius-close"
						@click="closeZidingyi">x</view> -->
					<image src="../../static/icon/叉.png" @click="closeChongzhi" style="width: 40rpx;height: 40rpx;">
					</image>
				</view>
				<view class="huati-box">
					<input class="huati-input" v-model="cami" placeholder="请输入卡密" />
					<image v-if="cami" src="../../static/icon/叉.png" @click="clearCami"
						style="width: 34rpx;height: 34rpx;margin: 0 10rpx;"></image>
				</view>

				<view class="huati-footer">
					<view class="cancel" @click="closeChongzhi">
						取消
					</view>
					<view class="submit" @click="submitChongzhi">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 充值模态框 start -->
	</view>
</template>

<script>
	import Http from '../../utils/http';
	const app = getApp()
	const http = new Http();
	export default {
		data() {
			return {
				title: 'AI视频',
				person: [],
				baseHttp: '',
				shop: {},
				videoList: [],
				shopId: '',
				videoNum: 0,
				zizhanghaoPopup: true,
				authoCode: "",
				cami: ""
			}
		},
		onLoad() {
			this.shopId = app.globalData.shopId;
			this.tradeId = app.globalData.tradeId;
			uni.showShareMenu({
				withShareTicket: true
			})
		},
		mounted() {
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
		},
		onShow() {
			this.getShopIfo()
			this.getJobNum()
			// this.getInfo();
		},
		onShareAppMessage() {
			return {
				title: '模剪，傻瓜式制作有流量的视频',
				path: '/pages/index/index',
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' // 指定分享时显示的图片链接
			}
		},
		//2.配置分享到朋友圈
		onShareTimeline() {
			return {
				title: '模剪，傻瓜式制作有流量的视频', //分享的标题
				query: '/pages/index/index', //点击分享链接之后进入的页面路径
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' //分享发送的链接图片地址
			}
		},

		methods: {
			gotoAuth() {
				uni.navigateTo({
					url: "/subpkg/authorization/authorization"
				})
			},
			//清楚卡密
			clearCami() {
				this.cami = "";
			},
			//打开充值弹窗
			openChonzhi() {
				this.cami = ""
				this.$refs.chongzhiPopup.open();
			},
			//关闭充值弹窗
			closeChongzhi() {
				this.$refs.chongzhiPopup.close();
				this.cami = "";
			},
			//提交充值
			submitChongzhi() {
				if (!this.cami) {
					return uni.showToast({
						title: "卡密不能为空",
						icon: "none"
					})
				}
				http.post("v1/system/createShop/exchageCami", {
					cami: this.cami
				}).then(res => {
					if (res.data.code != 200) {
						return uni.showToast({
							title: res.data.msg,
							icon: "error"
						})
					}
					uni.showToast({
						title: "兑换成功"
					})
					this.cami = ""
					this.$refs.chongzhiPopup.close()
				})
			},
			//前往素材页面
			gotoSucai() {
				uni.navigateTo({
					url: '/subpkg/videoLibrary/secondType'
				})
			},
			navSecondType() {
				uni.navigateTo({
					url: "/subpkg/videoLibrary/secondType"
				})
			},

			//获取剪辑库数量
			getJobNum() {
				http.get("v1/jiaoben/getJobNum").then(res => {
					this.videoNum = res.data.data
				})
			},
			//获取店铺信息
			getShopIfo() {
				if (app.globalData.shop.id) {
					uni.showLoading({
						title: "加载中...."
					})
					http.get("v1/system/createShop/getShopInfo").then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							if (res.data.msg == "") {
								uni.navigateTo({
									url: "/subpkg/createShop/createShop"
								})
							}
							this.shop = res.data.data;
							this.shopId = this.shop.id;
							app.globalData.tradeId = this.res.data.data.tradeId;
						}
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
					return uni.showModal({
						title: "请先创建店铺",
						showCancel: false
					})
				}
			},
			//导航到店铺
			navCreateShop() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/myJianjiKu"
				})
			},
			//店铺授权
			navShouquan() {
				this.$refs.zizhanghaoPopup.open()
			},
			//关闭子账号绑定弹窗
			closeZizhanghao() {
				this.$refs.zizhanghaoPopup.close()
			},
			//提交子账号授权码
			submitAuthCode() {
				if (!this.authoCode) {
					return uni.showToast({
						title: "授权码不能为空",
						icon: "error"
					})
				}

				http.post("v1/shopAuth/bind", {
					authCode: this.authoCode
				}).then(res => {
					if (res.data.code != 200) {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "绑定成功"
						})
						this.$refs.zizhanghaoPopup.close()
						this.authoCode = ""
					}
				})
			},
			//资料修改
			ziliao() {
				uni.navigateTo({
					url: '/subpkg/createShop/createShop'
				})
			},
			//获取用户信息
			getInfo() {
				this.shopId = app.globalData.shopId;
				if (this.shopId != null) {
					http.get('v1/system/createShop/' + this.shopId).then(res => {
						this.shop = res.data.data;
					})
				}
			},
			//获取剪辑库的数量
			bk(item) {
				app.globalData.shopId = item.id;
				this.getInfo();
				this.sendRequire();
				this.$refs.popup.close('bottom');
			},
			closepopup() {
				this.$refs.popup.close('bottom');
			},
			sendRequire() {
				this.shopId = app.globalData.shopId;
				let obj = {
					shopId: this.shopId
				}
				http.post('v1/jiaoben/Joblist', obj).then(res => {
					this.videoList = res.data.data;
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type);
				http.get('v1/system/createShop/getInfo/' + 1).then(res => {
					this.person = res.data.data;
				})
			},

			navJianjiku() {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/subpkg/mkvideo/darenkoubo"
					})
				}
			},
			//GIF引流
			demoFactory() {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/subpkg/demoFactory/demoFactory"
					})
				}
			},
			//一键成片
			navYijianchengpian(num) {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: "功能暂未开发",
						icon: 'error'
					})
				}
			},
			navIPXingxiang(num) {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/subpkg/mkvideo/IPxingxiangdazao?id=" + num
					})
				}
			},
			navDarenkoubo(num) {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/subpkg/mkvideo/IPxingxiangdazao?id=" + num
					})
				}

			},
			navWanghongmendian(num) {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/subpkg/mkvideo/IPxingxiangdazao?id=" + num
					})
				}
			},
			qiyebaokuan(num) {
				if (this.shopId == null) {
					uni.navigateTo({
						url: "/subpkg/createShop/createShop"
					})
					uni.showToast({
						title: '您还未有店铺,请创建!',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: "/subpkg/mkvideo/giftiaozhan?id=" + num
					})
					// uni.showToast({
					// 	title: "功能暂未开发",
					// 	icon: 'error'
					// })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		width: 100vw;
		height: 100%;
		background-size: cover;
		padding-top: 255rpx;
		background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/26/171145286587101bcde744060463bae026ba74496e400.png');
		background-repeat: no-repeat;

		.Info {
			height: 150rpx;
			padding: 0rpx 10rpx;
			margin-bottom: 25rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
		}

		.top {
			height: 100%;
			display: flex;
			justify-content: space-between;

			// background-color: rgb(238, 234, 249);
			.left {
				height: 120rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.info {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					.title {
						font-size: 40rpx;
						color: white;
						font-weight: bold;
					}

					.info-id {
						display: flex;
						margin-top: 10rpx;
						font-size: 25rpx;
					}
				}
			}
		}

		.footer {
			width: 100%;
			// background-color: rgb(238, 234, 249);
			display: flex;
			flex-wrap: wrap;
			margin: 0rpx 0rpx 10rpx 0rpx;
			box-sizing: border-box;
			justify-content: space-around;
			padding: 5rpx 40rpx;

			.item {
				width: 45%;
				height: 95rpx;
				//background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/25/1711358802968710759c808e549e3ab0479ae6cd287da.png');
				//background-size: cover;
				margin: 5rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-radius: 20rpx;
				padding: 5rpx;

				image {
					width: 294rpx;
					height: 76rpx;
				}

				// .image{
				// 	width: 70rpx;
				// 	height: 70rpx;
				// 	border-radius: 20rpx;
				// 	display: flex;
				// 	justify-content: center;
				// 	align-items: center;
				// 	image{
				// 		width: 40rpx;
				// 		height: 40rpx;
				// 	}
				// }
				// .text {
				//   height: 100%;
				//   display: flex;
				//   flex-direction: column;
				//   margin-left: 10rpx;
				//   justify-content: space-around;
				//   .title{
				// 	  font-weight: bold;
				// 	  font-size: 30rpx;
				//   }
				//   .sub-title{
				// 	  font-size: 24rpx;
				//   }
				// }
			}
		}

		.sucai {
			margin-top: 40rpx;
			height: 150rpx;
			width: 100%;
		}

		.Pcenter {
			margin-top: 20rpx;
			height: 175rpx;
			display: flex;
			padding: 0rpx 80rpx;
			align-items: center;
			justify-content: flex-start;
		}

		.qita {
			height: 220rpx;
			width: 95%;
			margin: 20rpx 0;
			border-radius: 10rpx;
			padding: 5rpx;

			.title {
				display: flex;
				margin-left: 60rpx;
			}

			.List {
				height: 150rpx;
				width: 100%;
				display: flex;
				align-items: center;

				.item {
					padding: 50rpx 20rpx 50rpx 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						height: 80rpx;
						width: 80rpx;
					}
				}
			}
		}


		.popup-content {
			width: 100vw;

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.PersonInfo {
					display: flex;

					image {
						height: 100rpx;
						width: 100rpx;
						margin: 10rpx;
					}
				}
			}
		}

		.popup-header {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.shangjia {
			margin: 10rpx 30rpx 30rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.left-right {
					margin-left: 20rpx;

					.qiye {
						font-size: 34rpx;
						font-weight: bold;
					}

					.shouquan {
						font-size: 24rpx;
						color: aquamarine;
						border: 1rpx solid aquamarine;
						height: 30rpx;
						line-height: 30rpx;
						width: 70rpx;
						margin-left: 10rpx;
						text-align: center;
						border-radius: 6rpx;
					}

					.create-time {
						font-size: 24rpx;
						color: #666;
					}

					.classify {
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			.right {
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #00008B;
				color: #fff;
				text-align: center;
				font-size: 30rpx;
				border-radius: 12rpx;
			}
		}

		.close {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #807e81;
			color: #fff;
			border-radius: 25rpx;
		}
	}

	//自定义话题
	.radius {
		height: 400rpx;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		border: 1rpx solid #fff;
		position: relative;


		.header {
			font-size: 36rpx;
			font-weight: bold;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin: 0 30rpx;
		}

		.huati-box {
			display: flex;
			// padding: 10rpx 30rpx 20rpx 30rpx;
			width: 90%;
			margin-left: 30rpx;
			margin-top: 50rpx;
			align-items: center;
			background: #f1f1f1;
			justify-content: space-between;
			border: 1rpx solid #eee;

			.huati-input {
				flex: 1;
				font-size: 32rpx;
				padding-left: 14rpx;
				color: #666;
				height: 70rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				text-indent: 20rpx;

			}
		}



		.huati-footer {
			display: flex;
			margin: 50rpx 30rpx 20rpx 30rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: bold;

			.cancel {
				width: 42%;
				height: 80rpx;
				background: #eee;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
			}

			.submit {
				width: 42%;
				height: 80rpx;
				background: #00008B;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				text-align: center;
			}
		}
	}
</style>